<template>
<div>
   <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
    <div class="iconfont header-abs-back">&#xe624;</div>
   </router-link>
   <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
    <router-link to="/">
     <div class="iconfont header-fixed-back">&#xe624; </div>
    </router-link>
    景点详情
   </div>
</div>
</template>
<script>

export default {
  name:"detailBanner",
  data(){
   return{
     showAbs:true,
     opacityStyle:{
      opacity:0
     }
   }
  },
  methods:{
    handleScroll(){
      console.log("您年爱上的那份阿斯蒂诺夫i那斯蒂芬你撒当年覅n");
      
       const top=document.documentElement.scrollTop
       if(top>60){
        const opacity=top/140
        
        this.opacityStyle={
          opacity
        }
        this.showAbs=false
       }else{
        this.showAbs=true
       }
    }
  },
  activated(){
    window.addEventListener("scroll",this.handleScroll);
  },
  deactivated(){
    window.removeEventListener("scroll",this.handleScroll);
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl" 
 .header-abs
  position:absolute
  left:0.2rem
  top:.2rem 
  width:.8rem 
  height:.8rem 
  border-radius:.4rem 
  background:rgba(0,0,0,.8);
  .header-abs-back
   color:#fff
   font-size:.4rem
   line-height:.8rem
   text-align:center
 .header-fixed
  z-index:2
  position:fixed
  top:0
  right:0
  left:0
  overflow:hidden
  height:$headerHeight
  line-height:$headerHeight
  text-align:center
  color:#fff
  background:$bgColor
  font-size:.32rem
  .header-fixed-back
   position:absolute
   top:0
   left:0
   width:.64rem
   text-align:center
   font-size:.4rem
   color:#fff
</style>